<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO监控面板 - 高级设计稿</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        light: '#f8fafc',
                        dark: '#1e293b'
                    }
                }
            }
        }
    </script>
    <style>
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .tooltip {
            position: relative;
            display: inline-block;
        }
        
        .tooltip .tooltiptext {
            visibility: hidden;
            background-color: #1f2937;
            color: #fff;
            text-align: center;
            padding: 8px 12px;
            border-radius: 6px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
        }
        
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        
        .progress-bar {
            height: 6px;
            background-color: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
            transition: width 0.3s ease;
        }
        
        .metric-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 24px;
            transition: all 0.3s ease;
        }
        
        .metric-card:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
        }
        
        .animate-pulse-slow {
            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Header -->
    <header class="gradient-bg text-white shadow-lg">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                        <i class="fas fa-chart-line text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold">SEO监控面板</h1>
                        <p class="text-blue-100 text-sm">外链质量与网站健康度监控</p>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="glass-effect px-4 py-2 rounded-lg">
                        <i class="fas fa-clock mr-2"></i>
                        <span class="text-sm">最后更新: 2024-01-15 14:30</span>
                    </div>
                    <button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg transition-colors">
                        <i class="fas fa-sync-alt mr-2"></i>刷新
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-8">
        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="metric-card card-hover">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-link text-blue-600 text-xl"></i>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-gray-800">1,234</div>
                        <div class="text-sm text-gray-500">总外链数</div>
                    </div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 75%"></div>
                </div>
                <div class="mt-2 text-xs text-gray-600">
                    <i class="fas fa-arrow-up text-green-500 mr-1"></i>
                    相比上周 +12%
                </div>
            </div>

            <div class="metric-card card-hover">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-gray-800">892</div>
                        <div class="text-sm text-gray-500">有效外链</div>
                    </div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 85%"></div>
                </div>
                <div class="mt-2 text-xs text-gray-600">
                    <i class="fas fa-arrow-up text-green-500 mr-1"></i>
                    有效率 72.3%
                </div>
            </div>

            <div class="metric-card card-hover">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fab fa-google text-yellow-600 text-xl"></i>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-gray-800">654</div>
                        <div class="text-sm text-gray-500">Google友好</div>
                    </div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 68%"></div>
                </div>
                <div class="mt-2 text-xs text-gray-600">
                    <i class="fas fa-arrow-down text-red-500 mr-1"></i>
                    友好度 53.0%
                </div>
            </div>

            <div class="metric-card card-hover">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-globe text-purple-600 text-xl"></i>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-gray-800">156</div>
                        <div class="text-sm text-gray-500">监控站点</div>
                    </div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 92%"></div>
                </div>
                <div class="mt-2 text-xs text-gray-600">
                    <i class="fas fa-arrow-up text-green-500 mr-1"></i>
                    本月新增 +8
                </div>
            </div>
        </div>

        <!-- Filter & Controls -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        <input type="text" placeholder="搜索站点或关键词..." 
                               class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-64">
                    </div>
                    <select class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option>全部状态</option>
                        <option>有效外链</option>
                        <option>无效外链</option>
                        <option>待检查</option>
                    </select>
                    <select class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option></option>
                        <option>友好</option>
                        <option>不友好</option>
                        <option>未知</option>
                    </select>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                        <i class="fas fa-plus mr-2"></i>添加站点
                    </button>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition-colors">
                        <i class="fas fa-download mr-2"></i>导出数据
                    </button>
                </div>
            </div>
        </div>

        <!-- Data Table -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="p-6 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-semibold text-gray-800">外链监控数据</h2>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-500">显示</span>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm">
                            <option>10</option>
                            <option>25</option>
                            <option>50</option>
                        </select>
                        <span class="text-sm text-gray-500">条记录</span>
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <div class="flex items-center space-x-2">
                                    <span>Task ID</span>
                                    <i class="fas fa-sort text-gray-400"></i>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <div class="flex items-center space-x-2">
                                    <span>站点信息</span>
                                    <i class="fas fa-sort text-gray-400"></i>
                                </div>
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">锚文本</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">外链地址</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户链接</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">外链状态</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Google友好度</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- Sample Data Row 1 -->
                        <tr class="hover:bg-gray-50 transition-colors fade-in">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-hashtag text-blue-600 text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium text-gray-900">5983363</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-globe text-white text-sm"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-900">journalnewsinfo.com</div>
                                        <div class="text-sm text-gray-500">新闻资讯站</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    print-on-demand
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <a href="#" class="text-blue-600 hover:text-blue-800 text-sm truncate block max-w-xs">
                                        https://www.journalnewsinfo.com/...
                                    </a>
                                    <span class="tooltiptext">点击查看完整链接</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <a href="#" class="text-green-600 hover:text-green-800 text-sm truncate block max-w-xs">
                                        https://inkedjoy.com/blog/print-o...
                                    </a>
                                    <span class="tooltiptext">点击查看完整链接</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    <span class="status-dot bg-green-500"></span>
                                    有效
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 cursor-help">
                                        <span class="status-dot bg-green-500"></span>
                                        友好
                                    </span>
                                    <span class="tooltiptext">检查时间: 2024-01-15 12:30<br>状态码: 200</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
                                    <i class="fas fa-chart-bar mr-2"></i>
                                    SEMRUSH数据
                                </button>
                            </td>
                        </tr>

                        <!-- Sample Data Row 2 -->
                        <tr class="hover:bg-gray-50 transition-colors fade-in">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-hashtag text-blue-600 text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium text-gray-900">5983360</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-blue-600 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-brain text-white text-sm"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-900">mindmybusinessnyc.com</div>
                                        <div class="text-sm text-gray-500">商业咨询</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                    print on demand
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <a href="#" class="text-blue-600 hover:text-blue-800 text-sm truncate block max-w-xs">
                                        https://www.mindmybusinessnyc.c...
                                    </a>
                                    <span class="tooltiptext">点击查看完整链接</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <a href="#" class="text-green-600 hover:text-green-800 text-sm truncate block max-w-xs">
                                        https://inkedjoy.com/blog/etsy-pri...
                                    </a>
                                    <span class="tooltiptext">点击查看完整链接</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    <span class="status-dot bg-green-500"></span>
                                    有效
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 cursor-help">
                                        <span class="status-dot bg-yellow-500"></span>
                                        不友好
                                    </span>
                                    <span class="tooltiptext">检查时间: 2024-01-15 11:45<br>状态码: 404</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
                                    <i class="fas fa-chart-bar mr-2"></i>
                                    SEMRUSH数据
                                </button>
                            </td>
                        </tr>

                        <!-- Sample Data Row 3 -->
                        <tr class="hover:bg-gray-50 transition-colors fade-in">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-hashtag text-blue-600 text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium text-gray-900">5983309</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gradient-to-r from-orange-500 to-red-600 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-chart-line text-white text-sm"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-900">businessnewstips.com</div>
                                        <div class="text-sm text-gray-500">商业新闻</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    print on demand
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <a href="#" class="text-blue-600 hover:text-blue-800 text-sm truncate block max-w-xs">
                                        https://businessnewstips.com/how...
                                    </a>
                                    <span class="tooltiptext">点击查看完整链接</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <a href="#" class="text-green-600 hover:text-green-800 text-sm truncate block max-w-xs">
                                        https://inkedjoy.com/blog/print-o...
                                    </a>
                                    <span class="tooltiptext">点击查看完整链接</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    <span class="status-dot bg-red-500"></span>
                                    无效
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="tooltip">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 cursor-help">
                                        <span class="status-dot bg-green-500"></span>
                                        友好
                                    </span>
                                    <span class="tooltiptext">检查时间: 2024-01-15 10:20<br>状态码: 200</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
                                    <i class="fas fa-chart-bar mr-2"></i>
                                    SEMRUSH数据
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="bg-white px-6 py-4 border-t border-gray-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2 text-sm text-gray-700">
                        <span>显示</span>
                        <span class="font-medium">1-10</span>
                        <span>共</span>
                        <span class="font-medium">156</span>
                        <span>条记录</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fas fa-chevron-left mr-2"></i>
                            上一页
                        </button>
                        <div class="flex space-x-1">
                            <button class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-lg">
                                1
                            </button>
                            <button class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                                2
                            </button>
                            <button class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                                3
                            </button>
                            <span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700">
                                ...
                            </span>
                            <button class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                                16
                            </button>
                        </div>
                        <button class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                            下一页
                            <i class="fas fa-chevron-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="container mx-auto px-6 py-6">
            <div class="flex items-center justify-between">
                <div class="text-sm text-gray-600">
                    © 2024 SEO监控面板. 保留所有权利.
                </div>
                <div class="flex items-center space-x-4 text-sm text-gray-600">
                    <a href="#" class="hover:text-blue-600">帮助文档</a>
                    <a href="#" class="hover:text-blue-600">API文档</a>
                    <a href="#" class="hover:text-blue-600">联系支持</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 简单的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 添加淡入动画
            const rows = document.querySelectorAll('tbody tr');
            rows.forEach((row, index) => {
                setTimeout(() => {
                    row.style.opacity = '1';
                    row.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
</body>
</html>